<template>
    <el-collapse modelValue="1">
        <el-collapse-item title="组件风格" name="1">
            <el-row :gutter="20">
                <el-col :span="6">
                    <div
                        title="单图片"
                        :class="{ 'active': widgetType === 'picture' }"
                        class="mode-item-box mode-1"
                        @click="onSelectType('picture')"
                    >
                        <div class="mode-item-centent"></div>
                    </div>
                    <div class="mode-item-title">单图片</div>
                </el-col>
                <el-col :span="6">
                    <div
                        title="图片列表"
                        :class="{ 'active': widgetType === 'album' }"
                        class="mode-item-box mode-2"
                        @click="onSelectType('album')"
                    >
                        <div class="mode-item-centent">
                            <div class="gray-block">
                                <div class="gray-block-item">
                                    <span></span>
                                    <span></span>
                                </div>
                                <div class="gray-block-item">
                                    <span></span>
                                    <span></span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="mode-item-title">图片列表</div>
                </el-col>
                <el-col :span="6">
                    <div
                        title="图文集"
                        :class="{ 'active': widgetType === 'list' }"
                        class="mode-item-box mode-3"
                        @click="onSelectType('list')"
                    >
                        <div class="mode-item-centent">
                            <div class="gray-block">
                                <div class="gray-block-item">
                                    <span></span>
                                    <span></span>
                                </div>
                                <div class="gray-block-item">
                                    <div class="line-block"></div>
                                    <div class="line-block"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="mode-item-title">图文集</div>
                </el-col>
            </el-row>
        </el-collapse-item>
    </el-collapse>
</template>

<script>
import { defineComponent, toRefs, computed } from 'vue'
import { ElMessage } from 'element-plus'
import useWidget from '@/libs/edit/widgetData'
import widgetTemplates from '@/components/edit/template-data/widget-data'
export default defineComponent({
    name: 'PictureMode',
    props: {
        widget: {
            type: Object,
            default: () => ({})
        }
    },
    setup(props) {
        const { widget } = toRefs(props)
        const widgetType = computed(() => widget.value?.widgetData?.eles?.type)

        const {
            onCloneWidget,
            onSelectWidget
        } = useWidget()

        const onSelectType = type => {
            if (widgetType.value === type) return
            if (!widgetTemplates[type]) {
                ElMessage({
                    message: '该组件不存在',
                    type: 'warning',
                })
                return
            }
            const widgetTemplate = onCloneWidget(widgetTemplates[type])
            widget.value.parentContent[widget.value.widgetIndex] = widgetTemplate
            onSelectWidget([widgetTemplate.eles.id])
        }

        return {
            widget,
            widgetType,
            onSelectType
        }
    }
})
</script>

<style lang="less" scoped>
@import "./picture-mode.less";
</style>